<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="关键词" prop="bookName">
        <el-input v-model="queryParams.bookName" placeholder="请输入关键词" clearable style="width: 240px" @keyup.enter="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="图书编码(ISBN)" prop="isbn" width="150" />
      <el-table-column label="图书封面" align="center" width="150">
        <template #default="scope">
          <el-image :src="scope.row.avatar"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="图书名称" prop="bookName" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="英文名称" prop="enName" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="作者" prop="author" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="简介" prop="desc" :show-overflow-tooltip="true" width="200" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="阅读" placement="top" v-if="scope.row.roleId !== 1">
            <el-button type="text" icon="Reading" @click="toRead(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
            <el-button type="text" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:delete']"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改岗位对话框 -->
    <el-dialog title="新增书籍" v-model="open" width="500px" append-to-body>
      <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="图书名称" prop="bookName">
          <el-input v-model="form.bookName" placeholder="请输入图书名称" />
        </el-form-item>
        <el-form-item label="英文名称" prop="enName">
          <el-input v-model="form.enName" placeholder="请输入英文名称" />
        </el-form-item>
        <el-form-item label="封面地址" prop="avatar">
          <el-input v-model="form.avatar" placeholder="请输入图书封面地址" />
        </el-form-item>
        <el-form-item label="ISBN" prop="isbn">
          <el-input v-model="form.isbn" placeholder="请输入ISBN" />
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="form.author" placeholder="请输入作者" />
        </el-form-item>
        <el-form-item label="资源地址" prop="source">
          <el-input v-model="form.source" placeholder="书籍资源地址" />
        </el-form-item>
        <el-form-item label="介绍" prop="desc">
          <el-input v-model="form.desc" type="textarea" placeholder="请输入图书介绍" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- <ai-chat></ai-chat> -->
  </div>
</template>
<script setup>
import AiChat from "../components/AiChat";
import request from "@/utils/request";
const { proxy } = getCurrentInstance();
const router = useRouter();
const total = ref(0);
const open = ref(false);
const loading = ref(false);
const data = reactive({
  form: {
    isbn: "",
    avatar: "",
    bookName: "",
    enName: "",
    author: "",
    desc: "",
    source: "",
    status: 1,
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    bookName: "",
  },
});

const { queryParams, form } = toRefs(data);
// 定义书籍信息
const tableData = ref([
  {
    isbn: "9787548613640",
    avatar: "https://cdn.readmoo.com/cover/78/c832hg9_460x580.jpg?v=0",
    bookName: "月亮和六便士",
    enName: "THE MOON AND SIXPENCE",
    author: "威廉·萨默塞特·毛姆",
    desc: "作品以法国后印象派画家保罗·高更的生平为素材，描述了一个原本平凡的伦敦证券经纪人斯特里克兰德，突然着了艺术的魔，抛妻弃子，绝弃了旁人看来优裕美满的生活，奔赴南太平洋的塔希提岛，用画笔谱写出自己光辉灿烂的生命，把生命的价值全部注入绚烂的画布的故事。贫穷的纠缠，病魔的折磨他毫不在意，只是后悔从来没有光顾过他的意识。作品表现了天才、个性与物质文明以及现代婚姻、家庭生活之间的矛盾，有着广阔的生命视角，用散发着消毒水味道的手术刀对皮囊包裹下的人性进行了犀利的解剖，混合着看客讪笑的幽默和残忍的目光",
    status: 1,
  },
]);
/** 搜索按钮操作 */
function handleQuery() {
   getList();
}
/** 重置按钮操作 */
function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
}
// 函数 点击阅读
function toRead(row) {
  // const url = "http://150.158.135.236:8888/down/sVnjXWhExtX0.pdf";
  router.push("/learn/read/" + row.id);
  // window.open("http://viewer.apisev.cn/viewer/preview/remote?url=" + url, "_blank");
}
// 点击新增
function handleAdd() {
  open.value = true;
}
// 获取列表
function getList() {
  loading.value = true;
  request({
    url: "/ex/book",
    method: "get",
    params: queryParams.value,
  }).then((response) => {
    tableData.value = response.content;
    total.value = response.totalElements;
    loading.value = false;
  });
}
function handleDelete(row) {
  // fix 删除 undefined 错误
  const id = row.id 
  console.log(id);
  proxy.$modal.confirm('是否确认删除名称为"' + row.bookName + '"的数据项?').then(function () {
      return request({
        url:'/ex/book/'+id,
        method:'delete'
      })
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
   }).catch(() => { });
    
}
// 提交
function submitForm() {
  proxy.$modal.loading("上传中");
  request({
    url: "/ex/book",
    method: "post",
    data: form.value,
  }).then((res) => {
    proxy.$modal.closeLoading();
    proxy.$modal.notifySuccess("上传成功");
    open.value = false;
    console.log(res);
    getList();
  });
}
getList();
</script>
